<template>
	<view class="index-box" :style="{'--color':vuex_config.themeColor1}">
		<view class="box">
			<!--      商品信息-->
			<view class="prod-box u-border-bottom">
				<view class="u-font-30 fw-bold">{{prodInfo.name}}</view>
				<view class="u-font-26 c-66 u-m-t-8">请在120分钟内完成支付，否则该订单将被自动取消</view>
			</view>
			<!--      规格信息-->
			<view class="spec-box u-border-bottom">
				<view class="spec-title">{{vuex_business.name}}</view>
				<block v-for="(item, index) in selectList" :key="index">
					<view class="spec-item">
						<view class="spec-name u-line-1">{{item.name}}</view>
						<view class="spec-price u-m-l-30 sww-tp">￥{{$price(item.amount)}} X {{item.num}}</view>
						<view class="spec-rebate u-border" v-if="$rebate(item.rebate)">返 {{$price(item.rebate)}}</view>
					</view>
				</block>
			</view>
			<view class="form-box">
				<u-cell-item title="优惠券" :value="couponItem.name" :arrow="false" @click="couponItem.show = true">
					<u-icon name="e775" size="30" color="#666666" custom-prefix="iconfont" slot="right-icon"></u-icon>
				</u-cell-item>
				<u-form-item label="取票人" label-width="130">
					<u-input v-model="dataForm.name" maxlength="10" :clearable="false" input-align="right" height="40"
						placeholder="请输入取票人姓名"></u-input>
				</u-form-item>
				<u-form-item label="手机号" label-width="130">
					<u-input v-model="dataForm.mobile" maxlength="11" :clearable="false" input-align="right" height="40"
						placeholder="请输入取票人手机号" type="number"></u-input>
				</u-form-item>
				<u-form-item label="备注" :border-bottom="false" label-width="130">
					<u-input v-model="dataForm.remark" auto-height type="textarea" maxlength="300" :clearable="false"
						input-align="right" placeholder="请控制在200字以内" />
				</u-form-item>
			</view>
		</view>
		<view class="box">
			<sww-pay-type v-model="dataForm.pay_type" :price="totalPrice"></sww-pay-type>
		</view>
		<view class="box1">
			<u-cell-item custom-class="cell-custom-class" :arrow='false' @click='changeRead'>
				<view class="cell-title u-font-24" slot="title">
					点击提交订单表示您已阅读并了解
				</view>
				<view class="readbtn" slot='right-icon' @click.stop="openRead">
					预定须知
				</view>
				<view class="buy-icon" slot="icon">
					<view class="iconfont iconfont-e720" v-if="readbool==0"></view>
					<view class="iconfont iconfont-e721" v-else></view>
				</view>
			</u-cell-item>
		</view>
		<sww-goods-action>
			<view class="sub-price">
				<text class="">总计：</text>
				<text class="sww-tp">￥{{$price(totalPrice)}}</text>
			</view>
			<view class="sub-btn" @click="onSubmit">提交订单</view>
		</sww-goods-action>
		<sww-coupon v-if="prodInfo.pk_id?true:false" v-model="couponItem" :prodPrice="prodPrice" :productIds="prodInfo.pk_id"
			class_id="2" :fk_supplier_id="1"></sww-coupon>
		<u-popup v-model="show" mode="bottom">
			<view class="prop-box">
				<view class="u-font-28 fw-bold c-99 mb-20">预定须知</view>
				<rich-text :nodes="prodInfo.descript"></rich-text>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import {
		payOrder
	} from "../../../../mixins/payOrder";
	import {
		wxConfig
	} from '@/mixins/wxConfig';
	import {
		isMobile
	} from "../../../../utils/validate";
	export default {
		mixins: [payOrder, wxConfig],
		data() {
			return {
				dataForm: {
					name: '',
					mobile: '',
					address: '',
					type: 0,
					remark: '',
					pay_status: '0',
					order_type: 1,
					coupon: '',
					pay_type: '1',
					// #ifdef MP-ALIPAY
					pay_type: '7',
					// #endif
					enter_date: ''
				},
				readbool: 0,
				couponItem: {
					price: 0,
					name: '无可用',
					show: false
				},
				show: false,
				prodInfo: {},
				selectList: [],
				prodPrice: 0, //产品总金额
				productIds: ''
			}
		},
		computed: {
			...mapState(['vuex_address', 'vuex_user']),
			totalPrice() { //订单总金额
				let price = this.prodPrice - this.couponItem.price
				return price >= 0 ? price : 0
			}
		},
		onLoad: function(options) {
			// #ifdef H5
			this.initWxConfig(['chooseWXPay']).then(() => {}).catch(() => {});
			// #endif
			this.initPage(options)
		},
		methods: {
			...mapActions(['loadUserCount']),
			//初始化页面
			initPage(options) {
				this.loadUserCount()


				// #ifdef   MP-ALIPAY || MP-BAIDU || MP-TOUTIAO	
				var pages = getCurrentPages()
				var page = pages[pages.length - 2]
				this.onAssignment(page.$vm.dataObj)
				// #endif

				// #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO	
				let openChannel = this.getOpenerEventChannel()
				openChannel.once('acceptParams', (res) => {
					this.onAssignment(res)
				})
				// #endif
				this.dataForm.name = this.vuex_user.real_name || ''
				this.dataForm.mobile = this.vuex_user.mobile || ''



			},

			// 页面赋值
			onAssignment(res) {
				this.prodInfo = {
					...res.prodInfo,
					descript: res.prodInfo.others ? res.prodInfo.others.replace(/\<img/gi,
						'<img style="width:100%" ') : ''
				}
				this.selectList = res.selectList
				this.prodPrice = res.prodPrice
				this.dataForm.enter_date = res.enterDate
				this.dataForm.name = this.vuex_user.realname || ''
				this.dataForm.mobile = this.vuex_user.phone || ''
			},


			changeRead() {
				this.readbool = this.readbool == 0 ? '1' : '0'
			},
			openRead() {
				this.show = true
			},


			zfbPay() {
				return new Promise((resolve, reject) => {
					// #ifdef MP-ALIPAY
					my.getAuthCode({
						scopes: ['scenic_order_auth'], //景区订单指定授权SCOPE，常量，请勿自行修改
						extInfo: {
							bizId: '2021002112693576', //景区订单指定授权APPID，常量，请勿自行修改
							bizType: 'GENERAL_REPLACE' // //景区订单指定业务类型，常量，请勿自行修改
						},
						success: (result) => {
							// 在result.authCode中获取到authCode即代表用户授权成功或已授权
							console.log(result, 'success')
						},
						complete: (
							result
						) => { //支付宝文档推荐在这里无论失败都在这里下单 https://opendocs.alipay.com/pre-open/01r11r
							console.log(result, 'complete')
							resolve()
						}
					});
					// #endif

					//#ifndef MP-ALIPAY

					resolve()
					// #endif
				})

			},


			//提交表单
			onSubmit() {

				this.zfbPay().then(() => {
					this.$u.debounce(() => {
						if (!this.dataForm.name) {
							this.$toast('请输入取票人姓名')
							return
						}
						if (!this.dataForm.mobile) {
							this.$toast('请输入取票人手机号')
							return
						} else if (!isMobile(this.dataForm.mobile)) {
							this.$toast('手机号格式错误')
							return
						} else if (this.readbool == 0) {
							this.$toast('请阅读预定须知')
							return
						}

						let json = this.selectList.map(item => {
							return {
								fk_pro_id: this.prodInfo.pk_id,
								fk_stock_id: item.pk_id,
								name: item.name,
								num: item.num,
								price: item.amount,
								enter_date: this.dataForm.enter_date,
								insurance_info: '',
								traveler: '',
								code_number: '',
								remark: ''
							}
						})

						let params = {
							...this.dataForm,
							json_detailed: JSON.stringify(json),
							postage: 0,
							coupon_id: this.couponItem.pk_id || 0,
							coupon: this.couponItem.price,
							total_amount: this.totalPrice
						}
						if (params.coupon) params.remark += `;使用优惠券${this.couponItem.price}`
						this._submitOrder(params, {
							// prodName: this.dataForm.name,
							totalPrice: params.total_amount,
							pay_type: params.pay_type,
							orderApi: 'AddOrderTicket',
							order_type: 2
						})
					}, 1000, true)
				})


			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.index-box {
		width: 100%;

		.prop-box {
			min-height: 400rpx;
			max-height: 800rpx;
			padding: 20rpx 30rpx;
		}

		.cell-custom-class {
			padding: 24rpx 0 !important;
		}

		.buy-info {
			color: #00A5F7;
			text-decoration: underline;
			text-decoration-color: #00A5F7;
		}

		.readbtn {
			border: 1px solid #C0C4CC;
			color: #C0C4CC;
			padding: 7rpx;
		}

		.buy-icon {
			width: 40rpx;
			height: 40rpx;
			color: var(--color);
			font-size: 38rpx;
			margin: auto 10rpx auto 0;
			position: relative;
			// bottom: 7rpx;
		}

		.cell-custom-class:after {
			left: 0 !important;
			top: 0 !important;
			bottom: auto !important;
			border-color: #E5E5E5 !important;
		}

		.box {
			width: 100%;
			padding: 0 24rpx;
			background-color: #ffffff;
			margin-bottom: 10rpx;
		}

		.box1 {
			width: 100%;
			background-color: #ffffff;
		}

		.prod-box {
			width: 100%;
			padding: 24rpx 0;
		}

		.spec-box {
			width: 100%;

			.spec-title {
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
			}

			.spec-item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				padding-bottom: 24rpx;

				.spec-name {
					max-width: 350rpx;
				}

				.spec-rebate {
					min-width: 80rpx;
					height: 40rpx;
					background-color: $sww-theme-color-opacity;
					display: flex;
					align-items: center;
					justify-content: center;
					color: var(--color);
					font-size: 26rpx;
					margin-left: 40rpx;
					border-radius: 6rpx;
					padding: 0 16rpx;

					&::after {
						border-color: $sww-theme-color-opacity;
						border-radius: 12rpx !important;
					}
				}
			}
		}

		.form-box {
			width: 100%;

			::v-deep .u-cell {
				padding: 20rpx 0;
			}

			.form-input {
				width: 100%;
				display: flex;

				textarea {
					width: 100%;
					line-height: 40rpx;
					font-size: 28rpx;
				}
			}
		}

		.sub-price {
			padding-left: 30rpx;
			font-size: 36rpx;
			font-weight: bold;
		}

		.sub-btn {
			width: 250rpx;
			height: 100rpx;
			background: var(--color);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			font-size: 30rpx;
			margin-left: auto;
		}
	}
</style>
